<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="Head.jsp"%>
<div class="mid_container mid_container_color">
	<div class="certification_block">
		<div class="certification_block_left">
			<ul class="tab_certification">
				<li class="certification_changed">
					<img src="images/certification_icon1_active.png" class="certification_icon"/>
					<p>用户信息</p>
				</li>
				<li>
					<img src="images/certification_icon2.png" class="certification_icon"/>
					<p>实名认证</p>
				</li>
			</ul>
		</div>
		<div class="certification_block_right">
			<div class="certification_content_theme">
				<div class="certification_content_tip">个人用户信息</div>
			</div>
			<div class="form_block">
				<form id="userForm">
					<div class="form_group">
						<label class="user_indormation_label">用户名</label>
						<div class="form_input from_div" id="userId">${mhUser.userId}</div>
					</div>
					<div class="form_group">
						<label class="user_indormation_label">姓名</label>
						<div class="form_input from_div" id="userName"">${mhUser.userName}</div>
						<input type="text" class="form_input" id="userName_value" hidden="true" value="${mhUser.userName} "/>
					</div>
					<div class="form_group">
						<label class="user_indormation_label">邮箱</label>
						<input type="text" class="form_input" id="userMail" value="${mhUser.userMail} "/>
					</div>
					<div class="form_group">
						<label class="user_indormation_label">手机号</label>
						<input type="text" class="form_input" id="userTel" value="${mhUser.userTel}"/>
					</div>
					<div class="form_group" align="right">
						<a class="form_change_btn form_change_btn_color2" href="javascript:edit()">保存</a>
					</div>
			    </form>
			</div>
		</div>
				
		<div class="certification_block_right" style="display: none;">
			<div class="certification_content_theme">
				<div class="certification_content_tip">个人实名认证</div>
			</div>
			<form id="btn_file" enctype="multipart/form-data" action="authentication/grRealInfoSubmit" method="POST">
			<input type="text" class="form_input" id="id" name="id" hidden="true" value="${mhUser.userId}"/>
			<input type="text" class="form_input" id="createTime" name="createTime" hidden="true" value="${grreal.createTime}"/>
			<input type="text" class="form_input" id="updateTime" name="updateTime" hidden="true" value="${grreal.updateTime}"/>
			<div class="form_block">
				<div class="form_group">
					<label><span>*</span>真实姓名</label>
					<input type="text" class="form_input" id="zname" name="zname" value="${grreal.zname}"/>
				</div>
				<div class="form_group">
					<label><span>*</span>联系地址</label>
					<input type="text" class="form_input" id="linkadd" name="linkadd" value="${grreal.linkadd}"/>
				</div>
				<div class="form_group">
					<label><span>*</span>证件类型</label>
					<select class="form_input" id="crtype" name="crtype"/>
						<option value="0">请选择</option>
						<option value="1" ${grreal.crtype == 1?'selected':''}>身份证</option>
						<option value="2" ${grreal.crtype == 2?'selected':''}>户口本/居住证</option>
						<option value="3" ${grreal.crtype == 3?'selected':''}>护照</option>
					</select>
				</div>
				<div class="form_group">
					<label><span>*</span>证件号码</label>
					<input type="text" class="form_input" id="crnum" name="crnum" value="${grreal.crnum}"/>
				</div>
				<div class="form_group">
					<label><span>*</span>证件照片上传</label>
					
						<div class="idcard_content">
						<div  class="idcard_block idcard_block_bgimg1">
							
							<input type="file"  id="file1" name="file1" style="display:none" onchange=PreviewImage(this,'imgPreview1')>
							<div id="imgPreview1" style="z-index:9999"> 
								<a href="javascript:F_Open_dialog('file1')"> <img src="images/shangchuan_btn.png" width="100px" height="100px"/> </a>
							</div>
							<div class="top_left_angel"></div>
							<div class="top_right_angel"></div>
							<div class="bottom_left_angel"></div>
							<div class="bottom_right_angel"></div>
						</div>
						<p>证件正面照片</p>
				    	</div>
					
						<div class="idcard_content">
						<div  class="idcard_block idcard_block_bgimg1">
							
							<input type="file"  id="file2" name="file2" style="display:none" onchange=PreviewImage(this,'imgPreview2')>
							<div id="imgPreview2" style="z-index:9999"> 
								<a href="javascript:F_Open_dialog('file2')"> <img src="images/shangchuan_btn.png" width="100px" height="100px"/> </a>
							</div>
							<div class="top_left_angel"></div>
							<div class="top_right_angel"></div>
							<div class="bottom_left_angel"></div>
							<div class="bottom_right_angel"></div>
						</div>
						<p>证件反面照片</p>
				    	</div>
				</div>	
				<div class="form_group">
					<label><span>*</span>证件合照上传</label>
					
						<div class="idcard_content">
						<div  class="idcard_block idcard_block_bgimg1">
							
							<input type="file"  id="file3" name="file3" style="display:none" onchange=PreviewImage(this,'imgPreview3')>
							<div id="imgPreview3" style="z-index:9999"> 
								<a href="javascript:F_Open_dialog('file3')"> <img src="images/shangchuan_btn.png" width="100px" height="100px"/> </a>
							</div>
							<div class="top_left_angel"></div>
							<div class="top_right_angel"></div>
							<div class="bottom_left_angel"></div>
							<div class="bottom_right_angel"></div>
						</div>
						<p>证件合照照片</p>
				    	</div>
				</div>	
				<div class="idcard_tips">
					<p>
						温馨提示:<br />
						1.身份证上所有信息清晰可见<br />
						2.照片需免冠，手持证件人五官清晰可见
					</p>
				</div>
				<div class="form_group">
					<label></label>
				    <a class="form_btn" href="javascript:submit()">提交</a>
				</div>
					
			</div>	
			</form>
		</div>
				<!--个人-->
		</div>
		</div>
		<%@ include file="Footer.jsp"%>
	<script src="js/jquery.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".tab_certification>li").click(function(){
				var num=$(this).index();
				$(this).addClass('certification_changed');
				$(this).siblings().removeClass('certification_changed');
				if(num==1){
					$(this).children('img').attr("src","images/certification_icon2_active.png");
					$(this).siblings().children('img').attr("src","images/certification_icon1.png");
				}else{
					$(this).children('img').attr("src","images/certification_icon1_active.png");
					$(this).siblings().children('img').attr("src","images/certification_icon2.png");
				};
				$('.certification_block_right').hide();
				$('.certification_block_right').eq(num).show();
			})
		})
		
		function edit() {
		 	var dataRequest = {
					"userName" : $("#userName_value").val(),
					"userId" : $("#userId_value").val(),
					"userMail" : $("#userMail").val(),
					"userTel" : $("#userTel").val()
			};
		 	$.ajax({
				type : "POST",
				url : "<%=path%>"+"/authentication/infoEdit",
				dataType : "json",
				async : false,
				data : dataRequest,
				success : function(data){
					alert(data.result);
				},
				error : function(e) {
					return 'error';
				}
			}); 
		}
		
		function F_Open_dialog(file) 
		{ 
			document.getElementById(file).click(); 
		}
		
		function submit() 
		{ 
		    var form = document.getElementById('btn_file');
		    form.submit();
		    alert("操作成功！");
		}
		
		/* 预览ok */
	  function PreviewImage(imgFile,imgPreview) 
	  { 
		  var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;      
		  if(!pattern.test(imgFile.value)) 
			  { 
				  alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");  
				  imgFile.focus(); 
			  } 
		  else 
			  { 
			  var path; 
			  if(document.all)//IE 
				  { 
				      imgFile.select(); 
				      path = document.selection.createRange().text; 
				      document.getElementById(imgPreview).innerHTML=""; 
				      document.getElementById(imgPreview).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 
				  } 
			  else//FF 
				  { 
					  path = URL.createObjectURL(imgFile.files[0]);
					  document.getElementById(imgPreview).innerHTML = "<img src='"+path+"' width='300px' height='200px'/>"; 
				  } 
			  } 
	  } 
	</script>
</html>
